<style scoped lang="less">
  .category-wrap {
    display: flex;
    flex-wrap: wrap;
  }

  .category-add {
    height: 100px;
    width: 100px;
    display: flex;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin-left: 5px;
    border: #f0f0f0 1px solid;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 500ms ease;
  }

  .category-add:hover {
    background-color: #c8dbef;
  }

  .category-item {
    justify-content: center;
    width: 120px;
    display: flex;
    margin: 0 5px;
    flex-direction: column;
  }
  .category-img {
    width: 100px;
    height: 100px;
  }
  .category-title {
    text-align: center;
  }
  .category-item-op-wrap{
    display: flex;
	  width: 100%;
    justify-content: space-around;
  }
  .category-item-op{
    cursor: pointer;
  }
	.select{
		cursor: pointer;
	}
</style>
<template>
  <Card>
    <div class="category-wrap">
      <div @click="selected(index)" :class="select?'select':''" class="category-item" v-for="(item,index) in data">
        <img class="category-img" :src="GLOBAL.getUrl(item.icon[0],true)">
        <div class="category-title">{{item.title}}</div>
        <div class="category-item-op-wrap">
          <span class="category-item-op del">
            <Icon class="category-item-op del" @click="del(index)" type="md-close-circle" />
          </span>
          <span >
            <Icon class="category-item-op edit" @click="toEdit(index)" type="ios-create" />
          </span>
        </div>
      </div>
      <div class="category-add" @click="toAdd">添加分类</div>
    </div>
    <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}">
      <Form ref="addForm" :rules="ruleValidate" :model="formItem" :label-width="80">
        <FormItem label="名称" prop="title">
          <Input v-model="formItem.title" placeholder="请输入名称"
                 style="width:180px"/>
        </FormItem>
        <FormItem label="图片" prop="icon">
          <SelectImg v-model="formItem.icon" @on-selected-imgs="imgSelected" :canOp="true"
                     :limit="1"
                     :initList="formItem.icon"></SelectImg>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="add" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
  import SelectImg from '../../components/select-img'
  import {getList, save,del} from '@/api/category'

  export default {
    name: 'category_list',
    components: {
      SelectImg
    },
	  props:{
      select:{type:Boolean,default:false}//是否是选择专题
	  },
    data() {
      return {
        modalSetting: {
          show: false,
          loading: false
        },
        formItem: {
          icon: null,
          title: null,
          id: null
        },
        data: [],
        ruleValidate: {
          title: [
            {required: true, message: '标题不能为空', trigger: 'blur'}
          ],
          icon: [
            {required: true, type: 'array', message: '请选择图片', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (!value) {
                  callback('请选择图片');
                } else if (value.length === 0 || value[0] === '') {
                  callback('请选择图片');
                } else {
                  callback();
                }
              }
            }
          ]
        }
      }
    },
    created() {
      this.getList();
    },
    methods: {
      selected(index){
        let data = this.data[index];
        if(this.select){
          this.$emit("category-selected",{active_type:this.GLOBAL.TYPE_LINK_CATEGORY,value:data.id,img:[data.icon[0]],title:data.title});
        }
      },
      imgSelected(imgs) {
        this.formItem.icon = imgs;
      },
      cancel() {
        this.modalSetting.show = false;
      },
      toAdd() {
        this.formItem = {
          icon: [],
          title: null,
          id: null
        };
        this.modalSetting.show = true;

      },
      toEdit(index) {
        this.formItem = this.data[index];
        this.modalSetting.show = true;
      },
      del(index) {
        let vm = this;
        this.$Modal.confirm({
          title: '确认删除吗？',
          content: '您确认要删除此分类吗？',
          onOk: () => {
            let id = this.data[index].id;
            del(id).then(rep=>{
              vm.$Message.success('删除成功');
              vm.getList();
            });
          },
          onCancel: () => {
          }
        });
      },
      add() {
        let vm = this;
        vm.$refs['addForm'].validate((valid) => {
            if (valid) {
              let params = {title: vm.formItem.title, icon: JSON.stringify(vm.formItem.icon), id: vm.formItem.id};
              save(params).then(rep => {
                vm.modalSetting.show = false;
                vm.getList();
              });
            }
          }
        );
      },
      getList() {
        let vm = this;
        getList().then(response => {
          response.data.data.forEach(v => {
            v.icon = JSON.parse(v.icon);
          });
          vm.data = response.data.data;

        })
      }
    }
  }
</script>
